<template>
	<view class="header-box">
		<view class="input-box header-item">
			<input
			:focus="focus"
			v-model="keyword"
			class="uni-input search-input"
			type="text" 
			placeholder-class="iconfont icon-sousuo"
			placeholder="搜索商品" />
		</view>
		<view class="header-item search-btn" @tap="search" v-if="showSearchBtn">搜索</view>
		<view v-else class="header-item search-btn-hidden"></view>
	</view>
</template>

<script>
	export default {
		props: {
			showSearchBtn: {
				type: Boolean,
				default() {
					return true
				}
			},
			focus: {
				type: Boolean,
				default() {
					return true
				}
			}
		},
		data(){
			return {
				keyword: ''
			}
		},
		onShow() {
			this.keyword = ''
		},
		methods: {
			search() {
				this.$emit('search',this.keyword)
			}
		}
	}
</script>

<style scoped>
	
	.header-box {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 10rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}
	.back-btn {
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #5C5F6A;
	}
	.search-btn {
		background-color: #E93A3D;
		border-radius: 30rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		width: 120rpx;
		color: #FFFFFF;
	}
	
	.search-btn-hidden {
		background-color: #FFFFFF;
		height: 55rpx;
		line-height: 55rpx;
		width: 80rpx;
	}
	
	.input-box {
		width: 80%;
	}
	.search-input {
		background-color: #F7F7F7;
		border-radius: 50rpx;
		height: 30rpx;
		line-height: 30rpx;
	}
	.header-item {
		display: inline-block;
	}
	.search-item {
		padding: 20rpx;
	}
	
</style>